<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EXT MenuTest..........</title>
<link rel="stylesheet" type="text/css" href="../../extjs_all/resources/css/ext-all.css"></link>
<script type="text/javascript" src="../../extjs_all/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../extjs_all/ext-all.js"></script>
<script type="text/javascript" src="../../extjs_all/source/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
	/**
	 * 颜超群
	 * 2008.05.31
	 *
	 *菜单
	 *
	 * 所在包:   Ext.menu
	 *
	 * 所有菜单类:
	 *      Ext.menu.Adapter   
	 *      Ext.menu.BaseItem  
	 *      Ext.menu.CheckItem
	 *      Ext.menu.ColorItem
	 *      Ext.menu.ColorMenu
	 *      Ext.menu.DateItem
	 *      Ext.menu.Item
	 *      Ext.menu.Menu
	 *      Ext.menu.MenuMgr
	 *      Ext.menu.Separator
	 *                
	 */

	/*
	 * 最常用的菜单类
	 * Ext.menu.Menu
	 * 属性:items    可以放菜单包中所有的实例，一般我们常用Ext.menu.Item
	 *
	 * Ext.menu.Item属性:
	 *
	 * handler      处理函数
	 * hideDelay    隐藏延迟，默认100毫秒
	 * hideOnClick  是否点击菜单项后自动隐藏，默认是true
	 * href         指定链接地址
	 * hrefTarget   链接打开的发式
	 * icon         可以指定在菜单项前面显示的图标，默认没有图标
	 * text         菜单项显示的文本，可以使用Html
	 *
	 */

	Ext.onReady(function() {

		var menu1 = new Ext.menu.Menu({

			items : [ { //菜单项的集合

				text : "颜超群", //菜单项的文本，

				href : "http://jaychaoqun.cnblogs.cn",//指定链接地址

				hrefTarget : "_blank", //链接打开的发式，在新窗口打开

				icon : "icon-info.gif" //菜单项前面的图标

			}, {

				text : "颜超群",

				href : "http://jaychaoqun.cnblogs.cn",

				hrefTarget : "_blank",

				icon : "icon-info.gif"

			}, {

				text : "颜超群",

				href : "http://jaychaoqun.cnblogs.cn",

				hrefTarget : "_blank",

				icon : "icon-info.gif"

			}, {

				text : "颜超群",

				href : "http://jaychaoqun.cnblogs.cn",

				hrefTarget : "_blank",

				icon : "icon-info.gif"

			}, {

				text : "颜超群",

				href : "http://jaychaoqun.cnblogs.cn",

				hrefTarget : "_blank",

				icon : "icon-info.gif"

			}, {

				text : "颜超群",

				href : "http://jaychaoqun.cnblogs.cn",

				hrefTarget : "_blank",

				icon : "icon-info.gif"

			} ]

		});

		/**

		 * 普通菜单

		 */

		var menu2 = new Ext.menu.Menu({

			items : [ {

				text : "<b>粗体</b>",

				handler : handlerMenu

			}, {

				text : "<i>斜体<i>",

				handler : handlerMenu

			}, {

				text : "<u>下划线</u>",

				handler : handlerMenu

			}, {

				text : "<font color=red>红色字体</font>",

				handler : handlerMenu

			} ]

		});

		/**

		 * 带子菜单的菜单

		 */

		var menu3 = new Ext.menu.Menu({

			items : [ {

				text : "菜单项1", //菜单项的文本，

				//子菜单

				menu : {
					items : [ {
						text : "子菜单1",
						handler : handlerMenu
					}, {
						text : "子菜单2",
						handler : handlerMenu
					}, {
						text : "子菜单3",
						handler : handlerMenu
					} ]
				}

			}, {

				text : "菜单项2",

				menu : {
					items : [ {
						text : "子菜单1"
					}, {
						text : "子菜单2"
					}, {
						text : "子菜单3"
					} ]
				}

			}, {

				text : "菜单项3",

				menu : {
					items : [ {
						text : "子菜单1"
					}, {
						text : "子菜单2"
					}, {
						text : "子菜单3"
					} ]
				}

			} ]

		});

		/**

		 * 日期菜单和颜色菜单

		 */

		var menu4 = new Ext.menu.Menu({

			items : [
					{

						text : "请选择日期",

						hideDelay : 2000, //延迟隐藏2000毫秒

						menu : new Ext.menu.DateMenu({ //日期菜单

							handler : function(db, date) {

								Ext.Msg.alert("Date", "您选的日期是"
										+ date.format("Y年m月d日"));

							}
						})

					}, {

						text : "请选择颜色",

						menu : new Ext.menu.ColorMenu({ //颜色菜单

							handler : function(cm, color) {

								Ext.Msg.alert("Color", "您选择的颜色是: " + color);

							}

						})

					} ]

		});

		var panel = new Ext.Panel({ //new 一个Panel 用以显示菜单

			width : 800, //宽度

			border : false, //没有边框

			renderTo : "div1", //显示的位置，在body里的一个div

			tbar : [ {
				text : "导航菜单",
				menu : menu1
			}, //把菜单放在Panel的顶部工具栏

			{
				text : "普通菜单",
				menu : menu2
			},

			{
				text : "带子菜单的菜单",
				menu : menu3
			},

			{
				text : "日期和颜色",
				menu : menu4
			}

			]

		});

		/**

		 * 用以处理菜单项点击事件

		 * @param {Object} item

		 */

		function handlerMenu(item) {

			Ext.Msg.alert("提示", "您点击了" + item.text + "项");

		}

	});
</script>

</head>

<body>

	<br>
	<br>

	<div align="center" id="div1"></div>

</body>

</html>